<template>
  <div v-drag>
    <div class="mask" @click="closePopup(false)"></div>
    <div class="edit_box" v-loading="loading">
      <div class="box_head">
        <p>高德Key详情</p>
        <i @click="closePopup(false)"></i>
      </div>
      <div class="box_body">
        <div class="line">
          <span class="lab">key：</span>
          <div  @click="copyKey" id="btn" title="复制">{{data.key}} </div>
        </div>

        <div class="line" >
          <span class="lab">所属账号：</span>
          <div>{{data.account?data.account:'——'}} </div>
        </div>


        <div class="line" >
          <span class="lab">地理服务使用上限：</span>
          <div>{{data.geoCountMax?data.geoCountMax:'——'}} </div>
        </div>

        <div class="line" >
          <span class="lab">关键字查询服务使用上限：</span>
          <div>{{data.placeCountMax?data.placeCountMax:'——'}} </div>
        </div>

        <div class="line" >
          <span class="lab">周边查询服务使用上限：</span>
          <div>{{data.placeAroundCountMax?data.placeAroundCountMax:'——'}} </div>
        </div>

        <div class="line" >
          <span class="lab">状态：</span>
          <div :style="'color:'+(data.enable==1?'#67c430':'orange')">{{data.enable == 1?'启用':'禁用'}}</div>
        </div>
      </div>
      <div class="box_foot">
        <span @click="closePopup(false)">取消</span>
        <span @click="closePopup(false)">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getDetail } from "@/api/config/gaode";
import commons from "@/utils/common";

export default {
  props:['mid'],
  data(){
    return {
      data:{},
      loading:false
    }
  },
  mounted() {
    if (this.mid){
      this.getDetail();
    }
  },
  methods:{
    getDetail(){
      let that = this;
      this.loading = true;
      getDetail(that.mid).then(res => {
        if (res){
          that.data = res;
        }
        that.loading = false;
      }).catch((e) => {
        that.loading = false;
      });
    },

    copyKey(){
      commons.copy(this.data.key,'#btn');
    },
    // 关闭
    closePopup(refresh){
      this.$emit('listenToChild', {refresh: refresh})
    }
  }
}
</script>

<style scoped>

.line .lab {
  width:200px;
}

#btn{
  color: #f7ab20;
  cursor: pointer;
}
</style>
